<template>
  <div>
    <div class="QaUserInfoItem" v-for="(item, index) of list" :key="index">
      <div class="QaUserInfoItemInfo" @click="handleEditClick(item, index)">
        <div class="NameAndAction">
          <span class="UserName">{{ item.userName }}</span>
          <van-tag :color="item.tagColor">{{ item.action }}</van-tag>
        </div>
        <div class="company">{{ item.company }}</div>
      </div>
      <div class="QaUserInfoItemOpt iconfont" @click="handleDeleteClick(index)">
        &#xe620;
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfoList",
  props: {
    list: Array,
  },
  methods: {
    handleDeleteClick(index) {
      this.$emit("removeInfo", index);
    },
    handleEditClick(item, index) {
      this.$emit("editInfo", item.userName, item.action, item.company, index);
    },
  },
};
</script>

<style scoped>
</style>
